<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
    setOptions(data) {
      this.chart.setOption(
        {
          tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: data.xAxis,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                show:true,
                fontSize: 12,
                fontFamily: 'PingFang SC',
                fontWeight: 500,
                color: '#FFFFFF'
              }
            }
            
          }
        ],
        yAxis: [
          {
            type: 'value',
            
            axisLine:{     //x轴坐标轴，false为隐藏，true为显示
              "show":false
            },
            axisLabel: {
              textStyle: {
                show:true,
                fontSize: 12,
                fontFamily: 'PingFang SC',
                fontWeight: 500,
                color: '#FFFFFF'
              }
            },
            splitLine :{    //网格线
              lineStyle:{
                  type:'dashed',    //设置网格线类型 dotted：虚线   solid:实线
                  color: '#21357B'
              },
              show:true //隐藏或显示
            }
          },
          {
            name: '单位：单',
              axisLine:{     //x轴坐标轴，false为隐藏，true为显示
              "show":false
            },
            nameTextStyle: {
              nameLocation: 'start',
              fontSize: '12px',
              fontFamily: 'PingFang SC',
              fontWeight: 500,
              color: '#fff',
            },
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: '20%',
            data: data.yAxis,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                  [
                      {offset: 1, color: '#7C8BFB'},
                      {offset: 0, color: '#B8B5FC'}
                  ]                
              )
          }
          }
        ],
              }
            )
          }
        }
}
</script>
